javascript设计模式--继承(下)

简介:   本章的主题是继承,在javascript中要实现继承比其他面相对象语言要复杂的多,他主要使用原型实现继承。下面就介绍几种常用的实现继承的方式。   1.经典继承(Classical Inheritance)   我们首先创建一个Person类。

  本章的主题是继承,在javascript中要实现继承比其他面相对象语言要复杂的多,他主要使用原型实现继承。下面就介绍几种常用的实现继承的方式。

  1.经典继承(Classical Inheritance)

  我们首先创建一个Person类。

/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}

   现在我们创建一个Author类,继承自Person

/* Class Author. */
function Author(name, books) {
  //这种方式只能继承Person构造函数内部的对象
  Person.call(
this, name); // Call the superclass's constructor in the scope of this.
  this.books = books; // Add an attribute to Author. }
//将Author的prototype指向Person的实例,这样他就继承了Person prototype里面的对象
Author.prototype
= new Person(); // Set up the prototype chain.
//注意,要将Author的constructor重新指回他本身,因为指定原型之后,constructor已经为null,需要重新指定
Author.prototype.constructor = Author; // Set the constructor attribute to Author. Author.prototype.getBooks = function() { // Add a method to Author.   return this.books; };

  通过上面的步骤就实现了经典继承,如果需要使用Author类,也是相当的简单。

var author = [];
author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);
author[1].getName();
author[1].getBooks();

  当然我们可以通过一个扩展方法使继承变的通用。

/* Extend function. */
function extend(subClass, superClass) {
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
}

  现在整个继承过程变为:

/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
/* Class Author. */
function Author(name, books) {
  Person.call(this, name);
  this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function() {
  return this.books;
};

 

  2.原型继承(Prototypal Inheritance)

  经典继承是通过声明一个类的结构,通过初始化该类的实例来创建新对象。新对象包括自己单独享有的属性和与其他实例共享的方法。然而原型继承并没有类的构造函数,他只创建一个对象,然后他将自己以原型的方式提供给其他子类使用。下面我们来看例子:

/* Clone function. */
function clone(object) {
  function F() {}
  F.prototype = object;
  return new F;
}


/*
Person Prototype Object. */ var Person = {   name: 'default name',   getName: function() {     return this.name;   } };
var reader = clone(Person);
alert(reader.getName()); // This will output 'default name'.
reader.name = 'John Smith';
alert(reader.getName()); // This will now output 'John Smith'.

  Clone方法创建了一个新的空函数F,然后将F的prototype指向原型对象,最后函数返回F的实例。

 

比较经典继承和原型继承:

  毫无疑问,经典继承更容易理解,几乎所有的javascript oop都是通过这种方式实现的。如果你创建一个广泛使用的api,最好还是用这种方式。

  原型继承占用更少的内存,因为所有的clone对象拥有同一份共享的属性和方法集合,除非他们直接通过写方法实现自己独有的。

 

adpics.aspx?source=kbh1983&sourcesuninfo
目录
相关文章
|
3天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
3天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
15 0
|
3天前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
31 0
|
3天前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
32 0
|
3天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
22 0
|
1天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
2天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
3天前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
3天前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
3天前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
17 1